import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import router from './router'
import i18n from './i18n'
// Element Plus 国际化
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
// 引入外部链接处理插件
import ExternalLinksPlugin from './plugins/externalLinks'

// 预加载关键资源
const preloadAssets = () => {
  // 预加载关键图片 - 修复类型问题
  const images: string[] = [];
  for (const image of images) {
    const img = new Image();
    img.src = image;
  }
  
  // 预加载关键组件
  const modules = [
    import('./pages/HomePage.vue'),
    import('./pages/TableBoard.vue'),
    import('./pages/CardEditor.vue'),
    import('./pages/ViewCard.vue'),
    import('./pages/Settings.vue')
  ];
  
  Promise.all(modules).catch(err => console.error('预加载组件出错:', err));
}

const app = createApp(App)

// 性能优化：设置异步组件加载超时
app.config.performance = process.env.NODE_ENV !== 'production'

app.use(router)
app.use(i18n)
// 注册外部链接处理插件
app.use(ExternalLinksPlugin)

// 根据当前语言设置Element Plus的语言
const currentLang = localStorage.getItem('language') || 'zh-CN'
app.use(ElementPlus, {
  locale: currentLang === 'zh-CN' ? zhCn : en
})

// Register all icons globally
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 先挂载应用
app.mount('#app')

// 应用挂载后启动预加载
if (window.requestIdleCallback) {
  window.requestIdleCallback(preloadAssets);
} else {
  setTimeout(preloadAssets, 200);
}
